
<main>
	<div class="container">
		<div class="search">
			<div class="back" on:click={back}>
				<Icon data={angleLeft} scale="2"/>			
			</div>
			<input class="searchInput" bind:value={userSearch} on:input={userInput} placeholder="搜索指令" type="text">
			<p> 查找结果 {findList.length}</p>
		</div>
		<div class="list">
			<ul class="list" on:scroll={listScroll}>
				<div style="height: 5rem;"></div>
				{#each findList as { name, e } , index}
					<li class="cell" on:click={()=>{
						document.querySelector(".markdownText").scrollTop=0;
						getMarkDown(name)
					}}>
						{#if index<startIndex||index>endIndex}
							<div></div>
						{:else}
							<div class="cellItem">
								<span class="ranking">{index+1}</span>
								<div>
									<div class="command">{name}</div>
									<span class="command_des">{e}</span> 
								</div>
								<div class="ws" >
									<Icon data={angleRight} scale="2"/>			
								</div>
							</div>
						{/if}
					</li>
				{/each}
			</ul>
			<div class="markdown_content {closeMakdown?'show':'hide'}" on:click={close}>
				<div class="markdown-body markdownText" on:click={(e)=>{e.stopPropagation()}}>
					<SvelteMarkdown source={markdownText} />
				</div>
			</div>
		</div>
	</div>
</main>

<style>
main{
	height: 100%;
	width: 100%;
}
.container{
	box-sizing: border-box;
	padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
	height: 100%;
	width: 100%;
	font-size: 1rem;
}
.search{
	position: fixed;
	top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
	background: rgb(233, 233, 233);
	width: 100%;
	height: 5rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	padding: 0px 1rem;
	box-sizing: border-box;
}
.ranking{
	min-width: 3rem;
	height: 3rem;
	padding: 0px 1rem;
	box-sizing: border-box;
	background: rgb(255, 255, 255);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	font-size: 1rem;
}
.back{
	font-size: 1rem;
	margin-right:1rem;
	width:3rem;
	white-space: nowrap;
	border-radius: 0.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.list{
	/* display: flex;
	flex-flow: column;
	height: 100%;
	width: 100%; */
}
.comparisonList{
	max-height: 50%;
	overflow:auto;
	/* border-bottom: 1px solid rgb(224, 224, 224); */
	
}
.comparisonList .ranking{
	background: rgb(255, 98, 50);
	color: white;
}
.searchInput{
	flex: 1;
	/* width: 70%; */
	height: 70%;
	border: none;
	border-radius: 0.3rem;
	text-align: center;
	margin-right: 1rem;
}
.list{
	height: 100%;
	width: 100%;
	flex: 1;
	overflow-y: scroll;
	/* padding-bottom:5rem; */
}
.cellItem{
	width: 100%;
	height: 100%;
	padding:0px 2rem;
	box-sizing: border-box;
	font-size: 0.1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
}
.cell{
	width: 100%;
	height: 8rem;
	border-bottom: white solid 1px;
	background: rgb(240, 240, 240);
}
.command{
	font-weight: 800;
	padding:0px 2rem;
	font-size: 2rem;
	text-align: center;
}
.command_des{
	display: block;
	text-align: center;
	font-size: 1rem;
	margin-top: 10px;
	color: gray;
}

.copy,.delBtn{
	padding: 1rem 1rem;
	box-sizing: border-box;
	background: #ffc62c;
	border-radius: 0.5rem;
	margin-left: 1rem;
	color: black;
	font-size: 1rem;
	user-select: none;
	cursor: pointer;
	white-space: nowrap;
}
.ws{
	white-space: nowrap;
}
.delBtn{
	background: rgb(255, 50, 50);
}
.markdown_content{
	position: fixed;
	height: 100%;
	width: 100%;
	bottom: 0px;
	left: 0px;
	
	z-index: 3;	
	transition: transform ease 0.3s,background 1s ease 0.3s;
}
.markdown_content.show{
	background: rgba(0, 0, 0, 0.774);
	transform: translateY(0);
}
.markdown_content.hide{
	
	transform: translateY(100%);
	
}
.markdownText{
	height: 60%;
	width: 100%;
	overflow: auto;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding:20px 20px;
	box-sizing: border-box;
}
</style>

<script>
	import Icon from 'svelte-awesome';
  	import {angleLeft,angleRight,times} from 'svelte-awesome/icons';
	import SvelteMarkdown from 'svelte-markdown'
	let userSearch = "";
	let findList = [];//显示数据
	let listData =[];//缓存的所有数据
	let comparisonList=[];//比较列表
	let cellHeight = 0;//高度
	let startIndex = 0;//显示的开始位置 
	let endIndex = 100;//显示的结束位置 
	let markdownText = "";
	let startTime = new Date().getTime();
	let closeMakdown=false;
	try{
		window.$G.removeBackButton()
	}catch(e){}

	window.onload=function(){
		console.log("渲染结束",new Date().getTime()-startTime)
	}

	getData("./data.json").then((data)=>{
		findList = data;
		listData =data;
		setTimeout(function(){
			let firstEle = document.querySelector(".cell")
			cellHeight = firstEle.offsetHeight 
		},1000)
	})
	
	function getMarkDown(name){
		getData(`./command/${name}.md`).then((data)=>{
			markdownText = data;
			closeMakdown = true
		})
	}
	function findName(name){
		var findArr = [];
		listData.forEach((item,index)=>{
			console.log(item.name.toLowerCase(),(name.toLowerCase()))
			if(item.name.toLowerCase().indexOf(name.toLowerCase())>=0){
				findArr.push(item)
			}
			if(item.e.toLowerCase().indexOf(name.toLowerCase())>=0){
				findArr.push(item)
			}
		})
		return findArr;
	}
	function getData(url){
		return new Promise((resolve,reject)=>{
			var request = new XMLHttpRequest();
			request.open("get", url);
			request.send(null);
			request.onload = function () {
				if (request.status == 200) {
					try{
						var json = JSON.parse(request.responseText);
						resolve(json)
					}catch(e){
						resolve(request.responseText)
					}
				}else{
					reject({msg:"加载失败"})
				}
			}
		})
	}
	let userInputTimeOut = null;
	function userInput(e){
		console.log(userSearch,"userSearch");
		clearTimeout(userInputTimeOut);
		userInputTimeOut=setTimeout(() => {
			let  r = findName(userSearch);
			if(r.length>0){
				findList = r;
			}else{
				findList = [];
			}
			if(userSearch==""){
				findList = listData;
			}
		}, 500);
	}

	let windowHeight = window.innerHeight;
	function listScroll(e){
		let scrollTop = e.target.scrollTop ;
		startIndex = parseInt(scrollTop/cellHeight);
		endIndex = parseInt((scrollTop+windowHeight)/cellHeight);
	}
	function back(){
		try{
			window.$G.exitWebApp();
		}catch(e){

		}
	}
	function close(){
		closeMakdown=false
	}

</script>
